<template>
<div>
    <div class="header" v-if="routerIsShow == 0">
        <div class="box">
            <div class="logos">
                <a href="/">
                    <img src="../../../../assets/logo/logo.png" alt="" />
                </a>
            </div>
            <div class="header_menu">
                <div class="menu">
                    <ul class="uld">
                        <li
                        v-for="(nav, index) in menus"
                        :key="index"
                        class="menus"
                        :class="{'active':current == index}"
                        @click="activeClick(index,nav)"
                        >
                            {{ nav.name }}
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
        <div></div>
    </div>
    <div class="headerOther" v-else>
        <div class="boxOther">
            <div class="logosOther">
                <a href="/">
                    <img src="../../../../assets/logo/logo@1x.png" alt="" />
                </a>
            </div>
            <div class="cantact_menu">
                <div class="menuOther">
                <ul class="uldOther">
                    <li
                    v-for="(nav, index) in menus"
                    :key="index"
                    class="menus"
                    :class="{'activeOther':current == index}"
                    @click="activeClick(index,nav)"
                    >
                        {{ nav.name }}
                    </li>
                </ul>
            </div>
            </div>
            
        </div>
    </div>
</div>
    
    
</template>

<script>
export default {
  data() {
    return {
        routerIsShow:0,
        current:0,
        menus: [
            {
            name: "Home",
            url: "/",
            },
            {
            name: "Product",
            url: "/rndustrialLayout",
            },
            {
            name: "Solution",
            url: "/hibiscusAltissima",
            },
            {
            name: "Contact",
            url: "/jinchun",
            }
        ],
    };
  },
  watch:{
    $route(to,from){
      console.log('路由变化了')
      console.log(this.current)
      console.log(to)
      if(to.name === "jinchun"){
        this.routerIsShow = 1
        this.current = 3
      }else if(to.name === "hibiscusAltissima"){
        this.current = 2
      }else if(to.name === "rndustrialLayout"){
        this.current = 1
      }
      else{
        this.routerIsShow = 0
      }
    }
  },
  mounted(){
    console.log('当前路由2222:'+this.$route.name)
    if(this.$route.name == "homepage"){
        this.current = 0
    }
    if(this.$route.name == "rndustrialLayout"){
        this.current = 1
    }
    if(this.$route.name == "hibiscusAltissima"){
        this.current = 2
    }
    if(this.$route.name == "jinchun"){
        this.current = 3
        this.routerIsShow = 1
    }
  },
  methods: {
    activeClick(i,val){
        this.current = i
        console.log(val)
        this.$router.push(val.url)
    }
  },
};
</script>

<style scoped>
.header{
  position: absolute;
  top:0;
  width:100%;
  height:50px;
  z-index: 99;
  padding: 59px 0;
}
.box{
    width:80%;
    margin: 0 auto;
    height:100%;
    display: flex;
    align-items: center;
    position: relative;
  }
.logos{
    margin-right: 100px;
}
.header_menu{
    position: absolute;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
}
.menu{
    /* padding-left: 50px; */
    font-family: Open Sans;
}
.uld{
    display: flex;
    height:100%;
}
ul li {
    opacity: 0.6;
    height:50px;
    line-height: 50px;
    font-size: 18px;
    color: #FFFFFF;
    padding:0 30px;
}
.active{
    color:#fff;
    opacity: 1;
}

.headerOther{
    /* position: absolute; */
  top:0;
  width:100%;
  height:50px;
  z-index: 99;
  padding: 59px 0;
    background: #fff;
}
.boxOther{
    width:80%;
    margin: 0 auto;
    height:100%;
    display: flex;
    align-items: center;
    position: relative;
  }
.logosOther{
    margin-right: 100px;
}
.cantact_menu{
    position: absolute;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
}
.cantact_menu .menuOther{
    padding-left: 50px;
    font-family: Open Sans;
}
.cantact_menu .uldOther{
    display: flex;
}
.cantact_menu .uldOther li {
    opacity: 0.6;
    font-size: 18px;
    color: rgba(50, 63, 81, 0.6);
    padding:0 30px;
}
.cantact_menu .uldOther .activeOther{
    color: #323F51;
    opacity: 1;
}
</style>